<template>
  <div>
    <el-button
      type="primary"
      @click="
        model = {};
        $refs.d.show();
      "
      >添加角色</el-button
    >
    <Table
      :tp="{ hasChildren: 'hasChildren', children: 'abc' }"
      :loading="queryLoading"
      :cols="cols"
      :data="list"
    >
      <template v-slot:menus="{ row }">
        <Tags :children="row.children" @close="deleteTag(row, $event)" />
      </template>
      <template v-slot:action="{ row }">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="
            model = { ...row };
            $refs.d.show();
          "
          >编辑</el-button
        >
        <el-button
          type="danger"
          size="mini"
          icon="el-icon-delete"
          @click="delRole(row)"
          >删除</el-button
        >
        <el-button
          type="warning"
          size="mini"
          icon="el-icon-s-tools"
          @click="
            getMenus();
            model = { ...row};
          "
          >分配权限</el-button
        >

        <!-- <el-button type="warning" @click="getMenus();
            model = { ...row };" size="mini">分配权限</el-button> -->
      </template>
    </Table>

    <!-- 添加修改· -->
    <MyDialog
      :title="this.title + '角色'"
      ref="d"
      @confirm="confirm"
      lw="100px"
    >
      <!-- {{model}} -->
      <MyForm ref="from" v-model="model" :opts="opts" width="100px"> </MyForm>
    </MyDialog>

    <!-- 分配权限模态框 -->
    <MyDialog title="分配权限" ref="dia" @confirm="updataRights">
      <el-tree
        :default-checked-keys="keys"
        ref="tree"
        :data="menus"
        :props="{ label: 'authName', children: 'children' }"
        node-key="id"
        default-expand-all
        show-checkbox
      >
      </el-tree>
    </MyDialog>

  </div>
</template>

<script>
import Table from "../../components/Table.vue";
import MyDialog from "../../components/Dialog.vue";
import MyForm from "../../components/Form.vue";
import Tags from "../../views/components/Tags.vue";
import {
  deleteRights,
  assignRights,
  getMenuTree,
  deleteRole,
  getRoles,
  modifyRole,
  addRole,
} from "api/rights";
export default {
  name: "roles",
  components: { Table, MyDialog, MyForm, Tags },
  data() {
    return {
      dialogFormVisible: false,
      treeProps:{
        label:"authName",
        children:"children"
      },
      /**
       * 表单配置项
       */
      opts: {
        roleName: {
          title: "角色名称",
          required: true,
          max: 20,
        },
        roleDesc: {
          title: "角色描述",
          required: true,
          max: 50,
        },
      },
      /**表头 */
      cols: [
        {
          title: "",
          type: "expand",
          slot: "menus",
        },
        {
          title: "#",
          type: "index",
        },
        {
          title: "角色名称",
          name: "roleName",
        },
        {
          title: "角色描述",
          name: "roleDesc",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
        },
      ],
      model: {},
      menus: [],
      keys: [],
    };
  },
  created() {
    this.getRolesList();
  },
  methods: {
    /**
     * 删除标签
     */
    async deleteTag({ roleName, id }, { authName, id: rid }) {
      let res;
      try {
        await deleteRights(id, rid);
        this.$message.success("权限删除成功");
        this.getRolesList();
      } catch (error) {
        console.log(error);
      }
      res && res();
    },
    /**
     * 修改权限
     */
    async updataRights() {
      const d = this.$refs.dia;
      try {
        const tree = this.$refs.tree;
        //  获取选中keys值
        const keys = [...tree.getCheckedKeys(), ...tree.getHalfCheckedKeys()];
        d.start();
        await assignRights(this.model.id, keys.join(","));
        this.getRolesList();
        this.$message.success("权限分配成功");
        d.hide();
      } catch (error) {
        console.log(error);
      }
      d.stop();
    },

    /**
     * 获取菜单列表
     */
    async getMenus() {
      try {
        this.queryLoading = true;
        // const { data } = await getMenuTree();
        this.menus = await getMenuTree();
        this.$refs.dia.show();
        this.keys.splice(0, Infinity);
        const deep = (children) => {
          for (const child of children) {
            if (child.children) {
              deep(child.children);
            } else {
              this.keys.push(child.id);
            }
          }
        };
        deep(this.model.children);
      } catch (error) {}
      this.queryLoading = false;
    },
    // //添加修改
    async confirm() {
      const d = this.$refs.d;
      try {
        d.start();
        await (this.model.id ? modifyRole : addRole)(this.model);
        this.$message.success(this.title + "角色成功");
        d.hide();
        this.getRolesList();
      } catch (error) {
        console.log(error);
      }
      d.stop();
    },
    //删除角色
    async delRole(row) {
      // console.log(123)
      let res;
      try {
        res = await this.$confirm(`你确定要删除【${row.roleName}】吗`);
        await deleteRole(row.id);
        this.$message.success("删除成功");
        this.getRolesList();
      } catch (error) {
        console.log(error);
      }
      res && res();
    },
    //获取角色列表数据
    async getRolesList() {
      try {
        this.queryLoading = true;
        this.list = await getRoles();
      } catch (error) {}
      this.queryLoading = false;
    },
  },
  computed: {
    title() {
      return this.model.id ? "修改" : "添加";
    },
  },
};
</script>

<style lang="scss" scoped>
</style>